<template>
  <div class="dishList">
    <el-breadcrumb>
      <el-breadcrumb-item to="/main">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜品管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <h1>菜品列表</h1>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-for="(item, i) of dishList" :key="i" :name="`index${item.cid}`">
        <!-- 标签名和徽章 -->
        <div slot="label">
          <el-badge :value="item.dishList.length">
            {{ item.cname }}
          </el-badge>
        </div>
        <!-- 菜品列 -->
        <el-row>
          <el-col v-for="(data, j) in item.dishList" :key="j" :xs="12" :md="6" :lg="4" :xl="3">
            <!-- <xfn-dish :data='data'></xfn-dish> -->
            {{ data.title }}
            <!-- 本地测试可将图片保存在本地客户端 上线使用服务器地址保存图片 -->
            <!-- <div><img style="max-width:50%;" :src="require(`../assets/imgs/${data.imgUrl}`)" alt=""></div> -->
            <!-- <div><img style="max-width:50%;" :src="`${$store.state.globalSettings.apiUrl}/img/dish/${data.imgUrl}`" alt=""></div> -->
            <div><img style="max-width:50%;" :src="data.imgUrl || 'https://xp-bird.gitee.io/food-image/2.jpg'" alt="" /></div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dishList: [],
      activeName: "index1",
    };
  },
  mounted() {
    //获取菜品列表
    let url = this.$store.state.globalSettings.apiUrl + "/dish";
    //解构data
    this.axios
      .get(url)
      .then(({ data }) => {
        this.dishList = data;
        console.log(this.dishList);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="scss">
.dishList {
  .el-badge__content.is-fixed {
    top: 10px !important;
    right: 0 !important;
  }
}
</style>
